<template>
  <div class="el-dialog">
    <el-dialog v-model="value"
               :title="title"
               :width="width"
               :modal="modal"
               :close-on-click-modal="closeOnClickModal"
               :before-close="$emit('before-close')"
               :destroy-on-close="destroyOnClose"
               append-to-body>
      <template #title>
        <div class="el-dialog--title">{{title}}</div>
      </template>
      <slot />
    </el-dialog>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, watch } from 'vue'
  import { ElDialog } from 'element-plus'
  export default defineComponent({
    components: { 'el-dialog': ElDialog },
    props: {
      modelValue: {
        type: Boolean,
        default: false,
      },
      title: String,
      width: {
        type: [String, Number],
        default: '30%',
      },
      // 是否需要遮罩层 配合append-to-body属性 Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true
      modal: {
        type: Boolean,
        default: false,
      },
      closeOnClickModal: {
        // 是否可以通过点击 modal 关闭 Dialog
        type: Boolean,
        default: true,
      },
      // 关闭时销毁 Dialog 中的元素
      destroyOnClose: {
        type: Boolean,
        default: false,
      },
    },
    emits: ['before-close', 'update:modelValue'],
    setup(props) {
      const value = ref<boolean>(false)

      watch(
        () => props.modelValue,
        (v1, v2) => {
          value.value = v1
        },
      )

      return { value, props }
    },
    methods: {},
  })
</script>

<style lang="scss" scoped>
  @include b(dialog) {
    @include m(title) {
      color: #000;
    }
  }
</style>